import styles from "../css/AddIssue.module.scss"
import { Form, Input, Select, Button, message } from "antd";
import { useState, useRef, useEffect } from "react";
import { Editor } from '@toast-ui/react-editor';
import '@toast-ui/editor/dist/toastui-editor.css';
import { useSelector } from "react-redux";
import { IStore } from "../redux/typings"
import { useDispatch } from "react-redux";
import { typeOptionCreator } from "../utils/tools"
import { getType } from "../redux/typeList";
import { addIssue } from "../api/issue"
import { useNavigate } from "react-router-dom";

// 添加问答页面
function AddIssue() {
    const [issueInfo, setIssueInfo] = useState({
        issueTitle: "", //问答标题
        issueContent: "", //问答内容
        userId: "", //用户id
        typeId: "" //类型id
    });
    const dispatch = useDispatch()
    const navigate = useNavigate();
    const { typeList } = useSelector((state: IStore) => state.type)
    const { userInfo } = useSelector((state: IStore) => state.user)
    const formRef = useRef(null);
    const editorRef = useRef(null);

    useEffect(() => {
        if (!typeList.length) {
            // 派发action来发送请求
            dispatch((getType as any)());
        }
    }, [])

    const addHandle = async () => {
        const content = (editorRef as any).current.getInstance().getHTML();
        // 获取用户信息
        const res = await addIssue({
            issueTitle: issueInfo.issueTitle,
            issueContent: content,
            typeId: issueInfo.typeId,
            userId: (userInfo as any)._id
        })
        // 跳转回首页
        navigate("/")
        // 提示
        message.success("你的问题已经提交，审核通过后将会进行展示")
    }
    const updateInfo = (newContent: any, key: string) => {
        const newIssueInfo = { ...issueInfo };
        (newIssueInfo as any)[key] = newContent;
        setIssueInfo(newIssueInfo)
    }
    const handleChange = (typeId: string) => {
        updateInfo(typeId, "typeId")
    }
    return (
        <div className={styles.container}>
            <Form
                name="basic"
                initialValues={issueInfo}
                autoComplete="off"
                ref={formRef}
                onFinish={addHandle}
            >
                {/* 问答标题 */}
                <Form.Item
                    label="标题"
                    name="issueTitle"
                    rules={[{ required: true, message: '请输入标题' }]}
                >
                    <Input
                        placeholder="请输入标题"
                        size="large"
                        value={issueInfo.issueTitle}
                        onChange={(e) => updateInfo(e.target.value, 'issueTitle')}
                    />
                </Form.Item>

                {/* 问题类型 */}
                <Form.Item
                    label="问题分类"
                    name="typeId"
                    rules={[{ required: true, message: '请选择问题所属分类' }]}
                >
                    <Select
                        style={{ width: 200 }}
                        onChange={handleChange}>
                        {typeOptionCreator(Select, typeList)}
                    </Select>
                </Form.Item>


                {/* 问答内容 */}
                <Form.Item
                    label="问题描述"
                    name="issueContent"
                    rules={[{ required: true, message: '请输入问题描述' }]}
                >
                    <Editor
                        initialValue=""
                        previewStyle="vertical"
                        height="600px"
                        initialEditType="wysiwyg"
                        useCommandShortcut={true}
                        language='zh-CN'
                        ref={editorRef}
                    />
                </Form.Item>


                {/* 确认按钮 */}
                <Form.Item wrapperCol={{ offset: 3, span: 16 }}>
                    <Button type="primary" htmlType="submit">
                        确认新增
                    </Button>

                    <Button type="link" htmlType="submit" className="resetBtn">
                        重置
                    </Button>
                </Form.Item>
            </Form>
        </div>
    );
}

export default AddIssue;